<script setup>
import { ref, reactive } from "vue"
import {useRouter} from "vue-router"
const router = useRouter()

const rules = {
  loginName: [{required: true, trigger: "blur"}],
  passwordNo: [{required: true, trigger: "blur"}],
  captcha: [{required: true, trigger: "blur"}]
}

const ruleFormRef = ref()

const loginParam = reactive({
  loginName: "",
  passwordNo: "",
  captcha: ""
})

const gotoLogin = () => {
  router.push({path: "/"})
}
</script>

<template>
  <div class="login-wrap">
    <div class="logo">

    </div>
    <div class="login-form">
      <div class="title">
        <span style="font-size: 25px;margin-right: 10px; color: #303133;">欢迎登录</span>
        <span style="color: #909399;">渝乡情后台系统</span>
      </div>
      <el-form ref="ruleFormRef" :model="loginParam" status-icon :rules="rules"
        class="demo-ruleForm">
        <el-form-item prop="loginName">
          <el-input class="cus-input" v-model="loginParam.loginName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="passwordNo">
          <el-input class="cus-input" v-model="loginParam.passwordNo" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input class="cus-input" v-model="loginParam.captcha" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item>
          <el-button class="cus-input" type="primary" @click="gotoLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: beige;
  background-image: url('../../assets/login_bg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  overflow: hidden;
  background-color: #00aa00;
  position: absolute;
  top: 20px;
  left: 20px;
}

.login-form {
  width: 400px;
  height: 500px;
  background-color: #fff;
  border-radius: 10px;
  position: absolute;
  top: calc(50% - 250px);
  right: 200px;
  box-shadow: var(--el-box-shadow);
}

.title {
  width: 100%;
  margin: 15% 0;
  text-align: center;
}

.demo-ruleForm {
  width: 300px;
  margin: 0 auto;
}

.cus-input {
  width: 300px;
  height: 50px;
}

:deep(.el-input__wrapper) {
  background-color: #f8f8f8;
  box-shadow: 0 0 0 1px #f8f8f8;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff;
}
</style>